{include file="header"}
<style>
    .layui-upload-list img{
        margin: 5px;
        width: 80px;
        height: 80px;
    }
</style>
<div class="layui-container login">
    <div class="layui-row ">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">在线报修</div>
                <div class="layui-card-body">
                    <form class="layui-form layui-form-pane" action="{:url('add')}" method="post">
                        <div class="layui-form-item">
                            <label class="layui-form-label">报修人姓名</label>
                            <div class="layui-input-block">
                                <input type="text" name="bxuser" required  lay-verify="bxuser" placeholder="请输入标题" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <input type="hidden" name="uid" value="0">
                        <div class="layui-form-item">
                            <label class="layui-form-label">报修区域</label>
                            <div class="layui-input-block">
                                <select name="bxqy" lay-verify="required">
                                    <option value=""></option>
                                    {volist name="bxqy" id="v"}
                                    <option value="{$v.bxqy}">{$v.bxqy}</option>
                                   {/volist}
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">报修地点</label>
                            <div class="layui-input-block">
                                <input type="text" name="bxdd" required  lay-verify="required" placeholder="请输入报修地点" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <input type="hidden" name="bxpic" class="multiple_show_img" value="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">故障图片</label>
                            <div class="layui-input-block">
                                <div class="layui-upload">
                                    <button type="button" class="layui-btn" id="multiple_img_upload">多图片上传</button>

                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">



                            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                预览：
                                <div class="layui-upload-list" id="div-slide_show"></div>
                            </blockquote>



                        </div>
                        <div class="layui-form-item">


                                <textarea name="wtms" class="layui-textarea" placeholder="请输入问题描述"></textarea>


                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">预约上门维修时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="yysj" id="yysj" required  lay-verify="required" placeholder="请选择预约上门维修时间" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">本人邮箱</label>
                            <div class="layui-input-block">
                                <input type="text" name="email" required  lay-verify="required" placeholder="请输入本人邮箱" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">联系电话</label>
                            <div class="layui-input-block">
                                <input type="text" name="lxdh" required  lay-verify="required" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <button lay-submit lay-filter="add"  class="layui-btn layui-btn-fluid">提交报修</button>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
<script>
    layui.use('element', function(){



    });

    var multiple_images = [];
    layui.use(['upload', 'layer','laydate','form'], function () {
        var $ = layui.jquery
        var form = layui.form;
        var layer = layui.layer;
        var upload = layui.upload;
        var laydate = layui.laydate;
        //AJAX
        form.render();
        form.on('submit(add)', function(data){
            $.ajax({
                data:data.field,
                url:"{:url('add')}",    //请求的url地址
                dataType:"json",   //返回格式为json
                async:true,//请求是否异步，默认为异步，这也是ajax重要特性
                type:"POST",   //请求方式
                beforeSend:function(){
                    this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
                },
                success:function(data){
                    if(data.status==1){
                        layer.msg(data.msg, {
                            icon: 6,//成功的表情
                            time: 1000 //1秒关闭（如果不配置，默认是3秒）
                        }, function(){
                            setTimeout('window.location.reload()',1000);
                        });
                    }else{
                        layer.msg(data.msg)
                    }
                },
                complete:function(){
                    setTimeout('window.location.reload()',3000);
                    layer.close(this.layerIndex);

                },
                error:function(){
                    //请求出错处理
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //多图片上传
        upload.render({
            elem: '#multiple_img_upload'
            ,url: '{:url("picuploads")}'
            ,accept:'images'
            ,acceptMime:'image/*'
            ,number:3
            ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#div-slide_show').append('<img src="'+ result +'" alt="'+ file.name
                        +'" title="点击删除" class="layui-upload-img" οnclick="delMultipleImgs(this)">')
                });
            }
            ,done: function(res){
                //如果上传成功
                if (res.status == 1) {
                    //追加图片成功追加文件名至图片容器
                    multiple_images.push(res.data.url);
                    $('.multiple_show_img').val(multiple_images);
                }else {
                    multiple_images.push(res.data.url);
                    $('.multiple_show_img').val(multiple_images);
                    //提示信息
                    layer.msg(res.msg);
                }
            }
        });
        //预约时间选择
        laydate.render({
            elem: '#yysj' //指定元素
            ,type: 'datetime'
            ,calendar: true
            ,theme: 'grid'
            ,format: 'yyyy-M-d H:M'
            ,min:minDate()

        });
    });
    // 设置最小可选的日期
    function minDate(){
        var now = new Date();
        return now.getFullYear()+"-" + (now.getMonth()+1) + "-" + now.getDate();
    }
    //单击图片删除图片 【注册全局函数】
    function delMultipleImgs(this_img){
        //获取下标
        var subscript=$("#div-slide_show img").index(this_img);
        //删除图片
        this_img.remove();
        //删除数组
        multiple_images.splice(subscript, 1);
        //重新排序
        multiple_images.sort();
        $('.multiple_show_img').val(multiple_images);
        //console.log("multiple_images",multiple_images);
        //返回
        return ;
    }


</script>
{include file="footer"}